<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.aClass{
				color: pink;
			}
			.bClass{
				color: deeppink;
			}
			.cClass{
				font-size: 30px;
			}
		</style>
	</head>
	<body>
        <div id="demo">
			<h2>1. class绑定: :class="xxx"</h2>
			<p class="cClass" :class="a">xxx是字符串</p>
			<p :class="{aClass: isA, bClass: isB}">xxx是对象</p>
			<p :class="['bClass', 'cClass']">xxx是数组</p>
			
			<h2>2. style绑定</h2>
			<p :style="{color: activeColor, fontSize: fontSize + 'px'}">
				:style="{color: activeColor, fontSize: fontSize + 'px'}"
			</p>
			<button @click="update">更新</button>
		</div>
        
        <script type="text/javascript" src="js/vue.js"></script>
		<script>
			new Vue({  // 配置对象
				el: '#demo',  
				data: {  
			    	a: "aClass",
			    	isA: false,
			    	isB: true,
			    	activeColor: 'red',
			    	fontSize: 20
				},
				methods:{
					update: function(){
						this.a = "bClass"
						this.isA = true
						this.isB = false
						this.activeColor = "green"
						this.fontSize = 30
					}
				}
			})
		</script>
	</body>
</html>
